<template>
    <div class='category'>
        <el-tree :data="categoryList" :props="defaultProps" @node-click="handleNodeClick" 
            :expand-on-click-node="false" node-key="id" :default-expanded-keys="expanded">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span class="threeBtn">
                    <el-button type="text" size="mini" @click.stop="() => append(data)">
                        Append
                    </el-button>
                    <el-button type="text" size="mini" @click.stop="() => exit(data)">
                        edit
                    </el-button>
                    <el-button type="text" size="mini" @click.stop="() => remove(node, data)">
                        Delete
                    </el-button>
                </span>
            </span>
        </el-tree>

        <el-dialog :title="diologType" :visible.sync="dialogFormVisible" :close-on-click-modal="true">
            <el-form :model="category">
                <el-form-item label="名称">
                    <el-input v-model="category.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                    <el-input v-model="category.picture" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="category.sorts" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitCategory">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            categoryList: [],
            defaultProps: {
                value: "id",
                children: 'childNodes',
                label: 'name',
            },
            category: {},
            dialogFormVisible: false,
            submitType: "",
            diologType: "",
            expanded: [],

        };
    },
    methods: {
        handleNodeClick(data) {
            // console.log(data);
        },
        initData() {
            this.$http.get('/v1/category/query').then((res) => {
                this.categoryList = res.data
            })
        },
        // 添加按钮
        append(data) {
            this.submitType = "append"
            this.diologType = "新增分类"
            this.dialogFormVisible = true;
            this.category.parentId = data.id;
        },
        // 修改按钮
        exit(data) {
            this.submitType = "edit"
            this.diologType = "修改分类"
            this.dialogFormVisible = true;
            this.$http.get(`/v1/category/info/${data.id}`).then(res => {
                this.category = res.data
            });
        },
        // 点击确定（修改 & 添加）
        submitCategory() {
            if (this.submitType == "append") {
                this.addCategory()
            } else if (this.submitType == "edit") {
                this.editCategory()
            }
        },
        // 删除分类
        remove(node, data) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.delete(`/v1/category/delete/${data.id}`).then(res => {
                    //刷新所有节点
                    this.initData()
                    //默认展开的节点
                    this.expanded = [node.parent.data.id]
                });
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => { })
        },
        // 新增分类
        addCategory() {
            if (this.category.name == null || this.category.name.trim().length == 0) {
                this.$message({
                    type: 'warning',
                    message: '名称不能为空'
                });
                return;
            } else {
                this.$http.post('/v1/category/save', this.category).then(res => {
                    //刷新所有节点
                    this.initData()
                    //默认展开的节点

                    this.expanded = [this.category.parentId]
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    // 重置表单
                    this.category = {};
                    this.dialogFormVisible = false;
                });
            }

        },
        // 修改分类
        editCategory() {
            if (this.category.name.trim().length == 0) {
                this.$message({
                    type: 'warning',
                    message: '名称不能为空'
                });
                return;
            } else {
                this.$http.put('/v1/category/update', this.category).then(res => {
                    //刷新所有节点
                    this.initData()
                    //默认展开的节点
                    this.expanded = [this.category.parentId]
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    // 重置表单
                    this.category = {};
                    this.dialogFormVisible = false;
                });
            }
        },
        // 点击取消
        cancel() {
            this.category = {};
            this.dialogFormVisible = false;
        },
    },
    computed: {},
    watch: {},
    created() {
        this.initData();
    },
    mounted() {

    },
    beforeCreate() { },
    beforeMount() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
    activated() { },
}
</script>
<style scoped>
.threeBtn {
    margin-left: 10px;
    line-height: 20px;
}
</style>